import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';
import Invoices from './routes/invoices';
import Expenses from './routes/expenses';
import InvoiceItem from './routes/invoiceItem';

ReactDOM.render(
  // element -> component
  <BrowserRouter>
    {/* Routes -> switch */}
    <Routes>
      {/* 一级路由 */}
      <Route path="/" element={<App />}>
        {/* 二级路由 */}
        <Route path="expenses" element={<Expenses />} />

        <Route path="invoices" element={<Invoices />}>
          {/* 三级路由 url传参*/}
          <Route path=":invoiceId" element={<InvoiceItem />} />
          {/* 索引路由 */}
          <Route
            index
            element={
              <main style={{ padding: '1rem' }}>
                <p>您还没有选择任意内容</p>
              </main>
            }
          />
        </Route>
        {/* 无匹配路由(默认页面)：根路由以外的任何情况 */}
        <Route
          path="*"
          element={
            <main>
              <p>没有匹配上任何项</p>
            </main>
          }
        />
      </Route>
    </Routes>
  </BrowserRouter>,

  document.getElementById('app')
);
